// src/components/forum/ForumHome.jsx
import React, { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import { getItem, setItem } from '../../utils/localStorage';
import { useAuth } from '../../contexts/AuthContext';

const ForumHome = () => {
  const [categories, setCategories] = useState([]);
  const [recentPosts, setRecentPosts] = useState([]);
  const { user } = useAuth();

  useEffect(() => {
    // Initialize categories if they don't exist
    const storedCategories = JSON.parse(getItem('forum_categories') || '[]');
    if (storedCategories.length === 0) {
      const initialCategories = [
        {
          id: 1,
          name: '赛车讨论',
          description: '讨论各种赛车的性能特点和驾驶体验',
          postsCount: 24,
          path: '/forum/cars'
        },
        {
          id: 2,
          name: '赛道攻略',
          description: '分享赛道驾驶技巧和经验',
          postsCount: 18,
          path: '/forum/tracks'
        }
      ];
      setItem('forum_categories', JSON.stringify(initialCategories));
      setCategories(initialCategories);
    } else {
      setCategories(storedCategories);
    }

    // Initialize recent posts if they don't exist
    const storedPosts = JSON.parse(getItem('forum_posts') || '[]');
    if (storedPosts.length === 0) {
      const initialPosts = [
        {
          id: 1,
          title: '法拉利488 GT3驾驶体验分享',
          author: 'speedmaster',
          category: '赛车讨论',
          replies: 15,
          createdAt: '2024-02-20T10:30:00Z'
        },
        {
          id: 2,
          title: '上海国际赛道弯道技巧详解',
          author: 'trackpro',
          category: '赛道攻略',
          replies: 23,
          createdAt: '2024-02-19T14:20:00Z'
        }
      ];
      setItem('forum_posts', JSON.stringify(initialPosts));
      setRecentPosts(initialPosts);
    } else {
      setRecentPosts(storedPosts);
    }
  }, []);

  return (
    <div className="space-y-8">
      <div className="flex justify-between items-center">
        <h1 className="text-2xl font-bold text-gray-900">论坛</h1>
        {user && (
          <Link
            to="/forum/new-post"
            className="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700"
          >
            发帖
          </Link>
        )}
      </div>

      <div className="grid gap-6">
        <div className="bg-white rounded-lg shadow-md overflow-hidden">
          <div className="px-6 py-4 bg-gray-50 border-b">
            <h2 className="text-xl font-semibold text-gray-900">版块</h2>
          </div>
          <div className="divide-y">
            {categories.map((category) => (
              <Link
                key={category.id}
                to={category.path}
                className="block p-6 hover:bg-gray-50"
              >
                <div className="flex justify-between items-start">
                  <div>
                    <h3 className="text-lg font-semibold text-gray-900">
                      {category.name}
                    </h3>
                    <p className="mt-1 text-gray-600">{category.description}</p>
                  </div>
                  <span className="text-gray-500">
                    {category.postsCount} 帖子
                  </span>
                </div>
              </Link>
            ))}
          </div>
        </div>

        <div className="bg-white rounded-lg shadow-md overflow-hidden">
          <div className="px-6 py-4 bg-gray-50 border-b">
            <h2 className="text-xl font-semibold text-gray-900">最新帖子</h2>
          </div>
          <div className="divide-y">
            {recentPosts.map((post) => (
              <div key={post.id} className="p-6">
                <div className="flex justify-between items-start">
                  <div>
                    <h3 className="text-lg font-semibold text-gray-900">
                      <Link
                        to={`/forum/post/${post.id}`}
                        className="hover:text-blue-600"
                      >
                        {post.title}
                      </Link>
                    </h3>
                    <div className="mt-1 text-sm text-gray-500">
                      由 {post.author} 发布于{' '}
                      {new Date(post.createdAt).toLocaleDateString()}
                    </div>
                  </div>
                  <span className="text-gray-500">{post.replies} 回复</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

export default ForumHome;